<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Welkom op uw portaal van myHealth</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <link rel="stylesheet" type="text/css" href="static/bootstrap/css/bootstrap.min.css" />
    <link rel="stylesheet" type="text/css" href="static/font-awesome/css/font-awesome.min.css" />

    <script type="text/javascript" src="static/js/jquery-2.1.1.min.js"></script>
    <script type="text/javascript" src="static/js/knockout-3.2.0.js"></script>
    <script type="text/javascript" src="static/bootstrap/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">

<div class="page-header">
    <h1><img src="static/img/logo.jpg"></h1>
	<div align="right">
		<div align="right"><a href="index.html">Log out</a>&nbsp;&nbsp;&nbsp; 
		<img src="static/img/NL.png"> / <img src="static/img/EN.png">
	</div>
</div>

<!-- Collapsible Panels - START -->
<div class="container">
    <div class="row">
		<div class="col-md-4">
			<div class="panel panel-default">
				<div class="panel-heading">
					<h3 class="panel-title">Informatie</h3>
					<span class="pull-right clickable"><i class="glyphicon glyphicon-chevron-up"></i></span>
				</div>
				<div class="panel-body">
                    Uw laatste login was op:<br />
                    <b>19 september 2014</b><br /> <br />
                    U heeft <b>0</b> openstaande rekeningen<br />
                    U kunt nu uw huisarts opgeven via de volgende link: <br />
                    <a href="">Ga naar mijn profiel</a>
				</div>
		    </div>
	    </div>
		<div class="col-md-8">
			<div class="panel panel-default">
				<div class="panel-heading">
					<h3 class="panel-title">Welkom</h3>
					<span class="pull-right clickable"><i class="glyphicon glyphicon-chevron-up"></i></span>
				</div>
				<div class="panel-body">
                    Welkom op op myHealth. Op deze pagina kunt direct zien welke handelingen van u vereist zijn. 
				</div>
			</div>
		</div>
		<div class="col-md-8">
			<div class="panel panel-default">
				<div class="panel-heading">
					<h3 class="panel-title">Metingen doorgeven</h3>
					<span class="pull-right clickable"><i class="glyphicon glyphicon-chevron-up"></i></span>
				</div>
				<div class="panel-body">
                    U heeft reeds 93 metingen doorgegeven. <a href="measurements.html">Klik hier om deze te bekijken</a>. 
				</div>
			</div>
		</div>
		<div class="col-md-12">
			<div class="panel panel-default">
				<div class="panel-heading">
					<h3 class="panel-title">Betaalgeschiedenis</h3>
					<span class="pull-right clickable"><i class="glyphicon glyphicon-chevron-up"></i></span>
				</div>
				<div class="panel-body">
                    U heeft 0 openstaande rekeningen. <a href="financial.html">Klik hier om deze te bekijken</a>. 
				</div>
			</div>
		</div>
	</div>	
</div>

<style>
.panel-heading span {
    margin-top: -20px;
    font-size: 15px;
}
.row {
    margin-top: 40px;
    padding: 0 10px;
}
.clickable {
    cursor: pointer;
}    
</style>

<script type="text/javascript">
    jQuery(function ($) {
        $('.panel-heading span.clickable').on("click", function (e) {
            if ($(this).hasClass('panel-collapsed')) {
                // expand the panel
                $(this).parents('.panel').find('.panel-body').slideDown();
                $(this).removeClass('panel-collapsed');
                $(this).find('i').removeClass('glyphicon-chevron-down').addClass('glyphicon-chevron-up');
            }
            else {
                // collapse the panel
                $(this).parents('.panel').find('.panel-body').slideUp();
                $(this).addClass('panel-collapsed');
                $(this).find('i').removeClass('glyphicon-chevron-up').addClass('glyphicon-chevron-down');
            }
        });
    });
</script>

<!-- Collapsible Panels - END -->

</div>

</body>
</html>